<template>
	<view class="details-layer">
		<view class="details-title" v-if="infoData">{{infoData.Title}}<u-icon v-if="projectStatus == '1'" name="mic" @click="playTTS" color="#333" size="20" style="display: inline-block;"></u-icon></view>
		<view class="content-layer" v-if="infoData">
			<view class="attention-layer" v-if="projectStatus == '1'">
				<text class="title">{{info.blogname}}</text>
				<follow-swan size="default" type="primary" bindfavorstatuschange="statuschange"/>
			</view>
			<view class="list-meta">
				<text class="list-m">发布于{{infoData.NewTime}}</text>
				<text class="list-m">热度{{infoData.ViewNums}}
				<!-- <u-count-to :fontSize="12" :end-val="Number(infoData.ViewNums)"></u-count-to> -->
				°C</text>
			</view>
			<u-parse :content="infoData.Content" :selectable="true"></u-parse>
		</view>
		
		<view class="recommend-layer" v-if="infoData && infoData.Relates">
			<view class="recommend-title">相关推荐</view>
			<view class="recommend-con">
				<view class="recommend-list ellipsis" v-for="(item,index) in infoData.Relates" :key="index" @click="goDetails(item.ID)">{{item.Title}}</view>
			</view>
		</view>
		<u-loading-page :loading="!infoData" iconSize="60" loadingText="正在努力加载中..." loading-mode="spinner"></u-loading-page>
		<comment-list v-if="projectStatus == '1' && commentParam.snid" :comment-param="commentParam" :toolbar-config="toolbarConfig"></comment-list>
	</view>
</template>

<script>
  	import shareMixin from '@/common/mixins/shareMixin.js';
	import { detailsApi } from 'static/services/mineServices';
	import { replacestr,toDate } from 'static/resource/until.js';
	export default {
    	mixins: [shareMixin],
		data() {
			return {
				infoData: '',
				commentParam: {
					// 模拟数据，使用时请替换真实数据
					snid: '',
					path: '',
					title: ''
				},
				toolbarConfig: {
					// 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
					share: {
						title: ''
					}
				}
			}
		},
		onReady(val){
		},
		onShow(val){
		},
		onLoad(val) {
			this.detailsApi(val.id);
			this.init();
			// #ifdef MP-BAIDU
			// 用于实现页面间的跳转，也可以放在 onLoad 生命周期中
			requireDynamicLib('myDynamicLib').listenEvent();
			// #endif
			
			// swan.setPageInfo({
			// 	title: this.info.blogname,
			// });
		},
		methods: {
			init(){
				this.homeApi();
			},
			async detailsApi(val){
				let d = await detailsApi({id: val});
				d.post.Content = replacestr(d.post.Content);
				this.infoData = d.post;
				this.commentParam = {
					snid: val,
					path: '/subPackages/details/index?snid=' + val,
					title: this.infoData.Title
				}
				this.toolbarConfig.share.title = this.infoData.Title;
				this.getSeo(d.post);
			},
			// 百度小程序SEO标题等
			getSeo(res){
				
				swan.setPageInfo({
					title: res.Title, // 标题
					keywords: res.Title, // 关键词
					description: res.Intro, // 摘要
					articleTitle: res.Title,
					releaseDate: toDate(res.UpdateTime,1), // 发布时间
					image: res.Thumb, // 图
					video: '', // 视频信息
					visit: '', // 浏览信息 支持版本
					likes: '', // 点赞量
					comments: '', // 评论量
					collects: '', // 收藏量
					shares: '', // 分享量
					followers: '', // 关注量
					success: res => {
						console.log('setPageInfo success');
					},
					fail: err => {
						console.log('setPageInfo fail', err);
					}
				})
			},
			// 关注
			statuschange(e) {
				if (e.detail && e.detail.isFavor === false) {
					// 组件已有内置提醒，避免冲突故而设置延时
					setTimeout(() => {
						swan.showToast({
							title: '取消关注',
							icon: 'none'
						});
					}, 500);
				}
			},
			// 跳转详情
			goDetails(val){
				this.goPage('/subPackages/details/index' + '?id=' + val);
			},
			// 语音播报
			playTTS() {
				// 低版本开发者工具环境下，可能不支持 TTS 语音播报模拟，请使用百度 APP 打开小程序体验
				swan.canIUse('playSystemTTS') && swan.playSystemTTS({
					success() {
						console.log('play TTS success!');
					},
					fail(reason) {
						console.log('play TTS fail!');
						// 并非所有的错误回调都提供了返回参数
						reason && console.log(reason);
					},
					complete() {
						console.log('play TTS complete!');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.details-layer {
		width: 100%;
		min-height: 100%;
		background: #fff;
		.details-title{
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 42rpx;
			width: 100%;
			padding: 36rpx 24rpx 12rpx;
			box-sizing: border-box;
		}
		.content-layer{
			width: 100%;
			padding: 16rpx 24rpx 48rpx;
			box-sizing: border-box;
			.attention-layer{
				width: 100%;
				background: rgba(0,0,0,.1);
				border-radius: 8rpx;
				padding: 12rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					color: rgab(0,0,0,.75);
					font-size: 28rpx;
					line-height: 36rpx;
				}
				swan-follow-swan{
					margin: 0;
				}
			}
			.list-meta{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 24rpx;
				box-sizing: border-box;
				.list-m{
					color: rgba(0,0,0,.65);
					font-size: 24rpx;
					line-height: 36rpx;
					padding-right: 16rpx;
				}
			}
			// blockquote{
			// 	border-left: 8rpx solid #007bff;
			// 	padding: 24rpx;
			// 	background-color: #f8f9fa;
			// 	margin-bottom: 30rpx;
			// 	color: #636874;
			// }
		}
		.recommend-layer{
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			.recommend-title{
				color: #000;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 48rpx;
				margin-bottom: 10rpx;
			}
			.recommend-con{
				width: 100%;
				.recommend-list{
					color: rgba(0,0,0,.8);
					font-size: 24rpx;
					line-height: 36rpx;
					padding: 10rpx 0;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(0,0,0,.15);
					width: 100%;
				}
			}
		}
	}

</style>
